<template>
  <el-select v-model="selectedOption" v-bind="$attrs">
    <el-option v-for="item in options" :key="item?.value" :label="item?.label" :value="item?.value"
      :disabled="item?.disabled">
      <slot :scope="item"></slot>
    </el-option>
  </el-select>
</template>

<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
  optionList: {
    type: Array,
    default: [
      {
        value: '选项1',
        label: '选项1',
      },
      {
        value: '选项2',
        label: '选项2',
      }
    ]
  },
  modelValue: {
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])

// 选择的option值
const selectedOption = ref(props.modelValue || '')
const options = ref(props.optionList)
watch(
  () => props.optionList,
  (val) => {
    options.value = val
  },
  {
    deep: true
  }
)

watch(() => props.modelValue, (val) => {
  selectedOption.value = val
}, {
  immediate: true
})
watch(selectedOption, (val) => {
  emit('update:modelValue', val)
}, {
  immediate: true
})



</script>

<style lang="scss" scoped></style>